//表单组件
Vue.component('qfTable1',{
    props:{
        state: {
            type: Boolean,
            default: true,
        },
    },
    data(){
        return {
            formData:{
                account:'',
                password:'',
            },
        }
    },
    template:`<fieldset>
        <legend>封装的表单</legend>
        用户名:<input type="text" v-model="formData.account" />
        密码:<input type="text" v-model="formData.password" />
        <button v-if="state" @click="$emit('submit',formData)">提交</button>
    </fieldset>`,
})

//导航栏组件
Vue.component('qfNavBar',{
    props: {
        title:{ 
            type: String,
            required: true,
        },

        leftArrow:Boolean,  //传就是true,不传就是false

    },
    template:`
        <div class="qf-nav-bar">
            <span @click="$emit('click-left')">{{leftArrow?'&lt;':''}}</span>
            <span>{{title}}</span>
            <span @click="$emit('click-right')">搜索🔍</span>
        </div>
    `,
    mounted(){
        console.log(this.leftArrow);
    },
})

//按钮组件
Vue.component('qfButton',{
    props:{    //TODO这里插槽还没学,先用属性获取
        // content:{
        //     type:String,
        //     required:true,
        // },
        type:{
            type:String,
            default:'default',
        },
    },
    // template:`<button :class="['qf-button','qf-button--'+type,'qf-button--normal'] ">{{content}}</button>`,
    template:`<button :class="['qf-button','qf-button--'+type,'qf-button--normal'] "><slot></slot></button>`,
})

//loading1组件
Vue.component('qf-loading1',{
    props:{
        state:{
            type:Boolean,
            default:true,
        },
    },
    template:`<div class="qf-loading1" v-if="state">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>`,
})

//loading2组件
Vue.component('qf-loading2',{
    props:{
        state:{
            type:Boolean,
            default:true,
        },
    },
    // template:`<div class="qf-loading2" v-if="state" @click="$emit('close',false)">
    template:`<div class="qf-loading2" v-if="state" @click="$emit('update:state',false)">
        <span>load...</span>
    </div>`,
})

//Dialog组件
Vue.component('qf-dialog',{
    props:{
        title:{
            type:String,
            required:true,
        },
        content:String,
        visible:{
            type:Boolean,
            default:false,
        },
    },
    template:`<div class="qf-dialog" v-if="visible">
        <div class="box">
            <div class="header">{{title}}</div>
            <div class="main">{{content}}</div>
            <div class="footer">
                <button @click="$emit('update:visible',false)">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>`,
})

//tips提示框组件(超文本不解析,需要用插槽)
// Vue.component('qfTips',{
//     props:{
//        content:{
//         type:String,
//         required:true,
//        },
//     },
//     template:`<div class="qf-tips">
//         {{content}}
//     </div>`,
// })

// tips提示框组件(插槽)
Vue.component('qfTips',{
    template:`<div class="qf-tips">
        <slot></slot>
    </div>`,
})

//page组件
Vue.component('qf-page',{
    props:{
        total:{
            type:Number,
            default:0,
        },
        pageSize:{
            type:Number,
            default:2,
        },
    },
    data(){
        return {
            totalPage:0,
        }
    },
    watch:{
        total:{
            immediate:true,
            handler(newData,oldData){
                console.log(newData);
                this.totalPage=Math.ceil(this.total/this.pageSize);
                console.log(this.totalPage);
            }
        },
    },
    template:`
        <div class="qf-page">
            <span v-for="(item,i) in totalPage" @click="$emit('click-page',item)">{{item}}</span>
        </div>
    `,
})

//table组件 iview table
Vue.component('qf-table',{
    props:{
        columns:{
            type:Array,
            // required:true,
        },
        data:{
            type:Array,
            // required:true,
        },
    },
    template:`
        <table border="1" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <th v-for="item in columns">{{item.title}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="trItem in data">
                <template v-for="thItem in columns">
                    <td v-if="thItem.render" v-html='thItem.render(trItem)'>
                        <!--{{thItem.render(trItem)}}-->
                    </td>
                    <td v-else>
                        {{trItem[thItem.key]}}
                    </td>
                </template>
            </tr>
        </tbody>
    </table>
    `,
})


//elementui table组件
Vue.component("qfTableColumn",{
    props:['prop','label'],   //将属性放到组件实例上
    template:`<span></span>`,
    mounted(){
      //组件渲染完毕后触发,相当于window.onload
      console.log(this); //this就是组件实例
      console.log(this.$parent); //父组件实例(就是qfTable)
      this.$parent.column.push(this);
    }
  })


  Vue.component('qfTable3',{
    props:{
      data:{
        type:Array,
        default:[],
      }
    },
    data(){
      return {
        column:[],
      }
    },
    mounted(){ //父渲染->渲染过程中解析子组件 子组件渲染->子完毕后子mounted->...->最后父mounted
      
      console.log(this.column,'xxx');
      console.log(this.column[3].$scopedSlots.default(),'虚拟DOM');
      console.log(this.column[3].$scopedSlots.default({sex:1})[0].text,'虚拟DOM');
      
    },
    template:`<table border="1" cellspacing="0" cellpadding="10">
        <thead>
          <tr>
            <th v-for="item in column">{{item.label}}</th> 
          </tr>
        </thead>
        <tbody>
          <tr v-for="trItem in data">
            <td v-for="(tdItem,i) in column">
              <!--{{trItem[tdItem.prop]}}-->
              {{column[i].$scopedSlots.default?column[i].$scopedSlots.default(trItem)[0].text:trItem[tdItem.prop]}}
            </td>
          </tr>
          <!--默认插槽 -->
          <slot></slot>
        </tbody>
      </table>`,
  })
